<template>
  <div>
    <div class="main">
      <div class="top">
        <div class="chooseAll">
          <input
            class="form-check-input"
            type="checkbox"
            id="checkboxNoLabel"
            aria-label="..."
            style="width:24px;height:24px"
            v-model="allCheck"
            @click="chooseAll"
          />
          <span>全选</span>
        </div>
        <div class="nvaData">
          <ul>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
          </ul>
        </div>
      </div>
      <div class="myProduucts" v-for="(item,index) in PData" :key="index">
        <div class="choose">
          <input
            class="form-check-input"
            type="checkbox"
            id="checkboxNoLabel"
            aria-label="..."
            style="width:24px;height:24px"
            v-model="item.check"
            @click="modifyProductCheck(item,index)"
          />
        </div>
        <div class="pic">
          <img :src="item.pic" alt />
        </div>
        <div class="name">
          <h3>{{item.name}}</h3>
        </div>
        <div class="price">
          <h3>￥{{item.price}}K</h3>
        </div>
        <div class="num">
          <button type="button" class="btn btn-light" @click="less(item)">-</button>
          <span>{{item.num}}</span>
          <button type="button" class="btn btn-light" @click="add(item)">+</button>
        </div>
        <div class="price">
          <h3>￥{{Math.floor(item.price*item.num*1000)/1000}}K</h3>
        </div>
        <div class="button">
          <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
        </div>
      </div>
      <div class="footer">
        <div class="total">
          <h4>合计:￥{{sum}}K</h4>
          <button type="button" class="btn btn-warning" style="width:120px" @click="goPay">结算</button>
        </div>
      </div>
      <div class="pay" v-if="show">
        <div class="part1">
          <img src="@/assets/logo1.jpg" alt />
        </div>
        <div class="part2">
          <button type="button" class="btn btn-secondary" style="margin-left:380px" @click="noShow">X</button>
          <ul>
            <li>用户：{{this.$store.state.userInfo.username }}</li>
            <li>电话：{{this.$store.state.userInfo.tel }}</li>
            <li>地址：{{this.$store.state.userInfo.local }}</li>
            <li>代付款：￥{{sum}}K</li>
          </ul>
          <button
            type="button"
            class="btn btn-danger"
            style=" margin:30px 30px 0px 0px;width: 300px;"
            @click="goOrder"
          >立即购买</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 1,
      PData: [],
      allCheck: false,
      nums: 0,
      show: false,
      alerts: false
    };
  },
  mounted() {
    this.PData = this.$store.state.ProductCart;
    this.PData.forEach(e => {
      e.check = false;
    });
  },
  methods: {
    add(item) {
      if (item.num < 10) {
        item.num++;
      }
    },
    less(item) {
      if (item.num > 1) {
        item.num--;
      }
    },
    del(index) {
      this.PData.splice(index, 1);
    },
    chooseAll() {
      this.allCheck == !this.allCheck;
      if (this.allCheck) {
        this.PData.forEach(e => {
          e.check = false;
        });
      } else {
        this.PData.forEach(e => {
          e.check = true;
        });
      }
    },
    modifyProductCheck(item, index) {
      item.check = !item.check;
      if (item.check) {
        this.nums++;
      } else {
        this.nums--;
      }
      if (this.nums == this.PData.length) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
      console.log(this.nums);
    },
    goOrder() {
      if (
        !this.$store.state.userInfo.tel &&
        !this.$store.state.userInfo.local
      ) {
        alert("请填写电话或地址！");
      } else {
        let indexs = [];
        this.PData.forEach((e, index) => {
          if (e.check) {
            let money = this.$store.state.userInfo.balance - e.price * e.num;
            if (money < 0) {
              alert("余额不足请充值！");
            } else {
              this.$store.state.PayData.push(e);
              indexs.push(index);
              this.$store.state.userInfo.balance = money;
              this.$router.push({
                path: "/order"
              });
              this.PData.splice(indexs, indexs.length);
            }
          }
        });
      }
    },
    goPay() {
      this.show = true;
    },
    noShow() {
      this.show = false;
    }
  },
  computed: {
    sum() {
      let sum = 0;
      this.PData.forEach(e => {
        if (e.check == true) {
          sum += e.price * e.num;
        }
      });
      return Math.floor(sum * 1000) / 1000;
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 90%;
  margin: auto;
  margin-top: 30px;
  .top {
    height: 80px;
    background-color: #4a5259;
    display: flex;
    justify-content: space-between;
    color: #000000;
    font-weight: 600;
    .chooseAll {
      width: 10%;
      height: 50px;
      margin: 20px;
      span {
        font-size: 22px;
        font-weight: 600;
        margin: 10px;
      }
    }
    .nvaData {
      width: 75%;
      height: 40px;
      margin: 23px;
      ul {
        display: flex;
        justify-content: space-around;
        li {
          width: 18%;
          height: 40px;
          font-size: 22px;
          font-weight: 600;
        }
      }
    }
  }
  .myProduucts {
    width: 100%;
    height: 160px;
    display: flex;
    flex-direction: row;
    .choose {
      margin: 60px 30px;
    }
    .pic {
      width: 10%;
      height: 120px;
      margin: 20px 60px;
      img {
        width: 100%;
        height: 120px;
      }
    }
    .name {
      width: 16%;
      height: 100px;
      margin: 50px 0px;
      text-align: center;
    }
    .price {
      width: 10%;
      height: 60px;
      margin: 50px 30px;
    }
    .num {
      width: 11%;
      height: 60px;
      margin: 50px 30px;
      span {
        margin: 0px 30px;
      }
    }
    .button {
      width: 60px;
      height: 20px;
      margin: 50px 70px;
    }
  }
  .footer {
    width: 100%;
    height: 80px;
    .total {
      width: 30%;
      height: 40px;
      margin: 20px 30px;
      float: right;
      display: flex;
      justify-content: space-around;
    }
  }
  .pay {
    width: 60%;
    height: 600px;
    margin: auto;
    position: absolute;
    top: 100px;
    left: 20%;
    background-color: #000000;
    opacity: 0.9;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    .part1 {
      width: 40%;
      height: 500px;
      margin: 40px;
      img {
        width: 100%;
        height: 500px;
        border-radius: 10px;
      }
    }
    .part2 {
      width: 45%;
      height: 550px;
      margin: 10px 20px;
      ul {
        width: 90%;
        height: 450px;
        margin: 0px 0px;
        border: #000000 1px solid;
        li {
          color: #ffffff;
          width: 90%;
          height: 40px;
          display: flex;
          margin-top: 60px;
          font-size: 28px;
          font-weight: 600;
          border-bottom: #ffffff 1px solid;
        }
      }
    }
  }
}
</style>